<template>
  <div class="warpBox">
    <div class="title box">
      <div>
        <span>发货包详细信息</span>
      </div>
      <div>
        <a-button type="primary" @click="addNewRepair">新增发货包</a-button>
      </div>
    </div>
    <a-row :gutter="[8, 8]">
      <a-col :span="6" v-for="(item, index) in repairLists" :key="index">
        <div class="cardBox">
          <div class="boxHead">
            <div class="text">
              <span>零配件{{ index + 1 }}</span>
            </div>
            <div class="handle">
              <a-icon type="delete" @click="deleteRepair($event, index)" />
            </div>
          </div>
          <div class="boxBody">
            <div class="itemWrap">
              <div class="label">
                <span>零配件类型</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input v-model="item.kitType" />
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>零配件型号</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input v-model="item.kitVersion" />
              </div>
            </div>

            <div class="itemWrap">
              <div class="label">
                <span>发货数量</span>
              </div>
              <div class="separator"><span>:</span></div>
              <div class="content">
                <a-input v-model="item.number" />
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import api from "@/server/userConfig";
import { WarrantyType } from "@/unit/constantValue";

// 输入防抖
function debounce(func, wait, parame) {
  var timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait, parame);
  };
}

export default {
  name: "cardList",
  components: {},
  props: {
    initData: Array
  },
  data() {
    return {
      userName: "",
      role: "",
      compId: "",
      name: "",
      companyNameLists: [],
      repairLists: [
        {
          kitType: "",
          kitVersion: "",
          number: ""
        }
      ]
    };
  },
  computed: {},
  watch: {
    initData: function(newVal, oldVal) {
      let _this = this;
      this.repairLists = buildLists(newVal);

      function buildLists(list) {
        let _lists = [];
        _lists = list.map(item => {
          let { kitType, kitVersion, number } = item;
          return {
            kitType,
            kitVersion,
            number
          };
        });
        return _lists;
      }
    }
  },
  methods: {
    addNewRepair() {
      this.repairLists.push({ kitType: "", kitVersion: "", number: "" });
    },

    deleteRepair(e, index) {
      let _this = this;
      if (_this.repairLists.length > 1) {
        this.$Modal.confirm({
          title: "是否删除?",
          onOk() {
            _this.repairLists.splice(index, 1);
          },
          onCancel() {}
        });
      } else {
        this.$message.warning("必须保留一条返修件信息");
      }
    },

    getFormData() {
      let _this = this;
      let valid = true;
      let lists = [];

      _this.repairLists.forEach((item, index) => {
        let { ...rest } = item;
        lists.push({ ...rest });
      });

      lists.forEach((item, index) => {
        let { ...restItem } = item;
        for (const key in restItem) {
          if (Object.hasOwnProperty.call(restItem, key)) {
            if (restItem[key] === "" || restItem[key] === undefined) {
              valid = false;
              _this.$message.error(`返修件${index + 1} 信息不完整`);
              return;
            }
          }
        }
      });

      return new Promise((resolve, reject) => {
        let validData = {
          isValid: valid,
          data: lists
        };
        resolve(validData);
      });
    }
  },
  mounted() {},
  created() {}
};
</script>

<style scoped="scoped">
.warpBox {
  width: 100%;
  background-color: #ffffff;
  padding: 16px;
}

.warpBox > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  padding: 0px 0px 16px 0px;
}

.warpBox .cardBox {
  border: 1px solid #e8e8e8;
  padding: 8px 8px;
  border-radius: 4px;
  /* min-height: 380px; */
}

.warpBox .boxHead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.warpBox .boxBody {
}

.warpBox .boxHead > .text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
}

.warpBox .boxHead > .handle {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: #1890ff;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 0;
  margin: 4px 0;
}

.itemWrap > .label {
  min-width: 84px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: right;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  width: 100%;
  padding: 0px 1px;
}

.warpBox .cardBox.icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
}

.iconBox {
  text-align: center;
  font-size: 64px;
  color: #373737;
}

.warpBox > .title.box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
</style>
